<template>
	<div class="container">
		<div class="content">
			<div class="header">
				<div class="left">
					<span>{{$utils.monthDate()}}&nbsp;&nbsp;&nbsp;&nbsp;{{$utils.week()}}</span>
				</div>
				<div class="right">
					<div class="userInfo">
						<image class="user-img" :src="userInfo.avatarPath" mode="aspectFill"></image>
						<div class="user-num">{{userInfo.myIndex || '000'}}</div>
					</div>
					<div class="userInfo">
						<image class="user-img" :src="userInfo.lastUpdateAvatar" mode="aspectFill"></image>
						<div class="user-num">{{userInfo.lastUpdateIndex || '000'}}</div>
					</div>
				</div>
			</div>
			<div class="body">
				<div class="tab">
					<div class="tab-item" @click="selectTab(0)">关注</div>
					<div class="tab-item" @click="selectTab(1)">粉丝</div>
				</div>
				<div class="section" v-for="(item,index) in list" :key="index">
					<slide-left @delItem="delRelation" :data_transit="item">
						<div class="section-item">
							<div class="image-text">
								<image v-show="current == 0" class="single-avatar" @click="$navSkin.toDetail(item.followUserId)" :src="item.avatarPath" mode="aspectFill"/>
								<image v-show="current == 1" class="single-avatar" @click="$navSkin.toDetail(item.userId)" :src="item.avatarPath" mode="aspectFill"/>
								<div class="text-group" v-show="current == 0">{{item.userComment ||item.userName}}</div>
								<div class="text-group"  v-show="current == 1">{{item.followComment ||item.userName}}</div>
							</div>
							<div class="text">{{item.lastIndex}}</div>
							<div class="text-time">{{item.lastDate}}</div>
							<div class="icon-wrap">
								<image class="icon" v-show="current == 0" @click="toComment(item.followUserId)" src="/static/icons/icon_lianxi.png" />
								<image class="icon" v-show="current == 1" @click="toComment(item.userId)" src="/static/icons/icon_lianxi.png" />
								<image class="icon" v-show="current == 0" @click="toNotes(item.followUserId,item)" src="/static/icons/edit.png" />
								<image class="icon" v-show="current == 1" @click="toNotes(item.userId,item)" src="/static/icons/edit.png" />
							</div>
						</div>
					</slide-left>
				</div>
			</div>
		</div>
		<uni-popup ref="sendPopup" type="bottom" :maskClick="false">
			<div class="send-popup">
				<div class="send-head">
					<div class="textarea-wrap">
						<textarea maxlength="2000" v-model="formData.content" placeholder-style="color:#bcbcbc;padding:0;font-size:26rpx"
							placeholder="请输入你想留言的内容..." />
					</div>
					<div class="footer">
						<div class="btn" @click="close()">
							取消
						</div>
						<div class="btn submit" @click="submit()">
							留言
						</div>
					</div>
				</div>
			</div>
		</uni-popup>
		<uni-popup ref="notesPopup" type="bottom" :maskClick="false">
			<div class="send-popup">
				<div class="send-head">
					<div class="textarea-wrap">
						<textarea maxlength="2000" v-model="notes" placeholder-style="color:#bcbcbc;padding:0;font-size:26rpx"
							:placeholder="'请备注'+userName" />
					</div>
					<div class="footer">
						<div class="btn" @click="close()">
							取消
						</div>
						<div class="btn submit" @click="notesSubmit()">
							备注
						</div>
					</div>
				</div>
			</div>
		</uni-popup>
	</div>
</template>

<script>
	import data from '@/js/index/relation/data.js';
	import methods from '@/js/index/relation/methods.js';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import slideLeft from '@/components/slideLeft/slideLeft.vue'
	import {
		mapState
	} from 'vuex';
	// 引入antv组件
	import F2 from '@/uni_modules/lime-f2/components/l-f2/f2-all.min.js';
	export default {
		data,
		methods,
		onLoad(e) {
			this.getPageList()
		},
		onShow() {

		},

		onHide() {
			console.log('on hide')
		},
		onPullDownRefresh() {
			this.page = 1
			this.list_rows = 10
			this.list = []
			this.getPageList()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.getPageList()
		},
		onUnload() {},
		computed: {
			...mapState(['userInfo']),
			bgHeight() {
				// #ifdef APP-PLUS
				return 250
				// #endif
				return this.navigationBarHeight + uni.upx2px(364);
			}
		},
		components: {
			uniPopup,
			slideLeft
		}
	};
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	/* uni-page{
   	background-color: #FFFFFF;
   } */
</style>
<style scoped lang="scss">
	@import '~@/style/index/relation.scss';
</style>
